<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT 智能对话系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: #f8fafc;
            color: #1a202c;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        h1 {
            margin-top: 25px;
            font-size: 2rem;
            color: #2b6cb0;
            font-weight: 700;
            text-align: center;
        }

        .chat-box {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(43, 108, 176, 0.1);
            width: 90%;
            max-width: 750px;
            height: 75vh;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }

        .messages {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            scroll-behavior: smooth;
        }

        .message {
            max-width: 80%;
            padding: 0.8rem 1rem;
            border-radius: 10px;
            line-height: 1.6;
            font-size: 1rem;
            animation: fadeIn 0.3s ease-in-out;
            word-wrap: break-word;
        }

        .user {
            align-self: flex-end;
            background: #2b6cb0;
            color: #ffffff;
            border-bottom-right-radius: 3px;
        }

        .bot {
            align-self: flex-start;
            background: #edf2f7;
            color: #1a202c;
            border-bottom-left-radius: 3px;
        }

        .input-area {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: #f1f5f9;
            border-top: 1px solid #e2e8f0;
        }

        input[type="text"] {
            flex: 1;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            border: 1px solid #cbd5e0;
            background: #ffffff;
            color: #1a202c;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            border-color: #2b6cb0;
        }

        button {
            background: #2b6cb0;
            border: none;
            color: white;
            padding: 0.75rem 1.4rem;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s, transform 0.2s;
        }

        button:hover {
            background: #2c5282;
            transform: translateY(-2px);
        }

        footer {
            margin: 1.5rem 0;
            color: #718096;
            font-size: 0.9rem;
            text-align: center;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 滚动条美化 */
        .messages::-webkit-scrollbar {
            width: 6px;
        }
        .messages::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 3px;
        }
        .messages::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }
    </style>
</head>
<body>
    <h1>🧠 基于GPT2医疗智能问答机器人</h1>

    <div class="chat-box">
        <div class="messages" id="messages">
            <div class="message bot">你好！我是你的AI助手，有什么可以帮你的吗？</div>
        </div>

        <div class="input-area">
            <input type="text" id="userInput" placeholder="请输入你的问题..." autocomplete="off">
            <button id="sendBtn">发送 🚀</button>
        </div>
    </div>

    <footer>© 2025 GPT Dialogue Demo | Flask + Transformers</footer>

    <script>
        const messages = document.getElementById("messages");
        const input = document.getElementById("userInput");
        const sendBtn = document.getElementById("sendBtn");

        function scrollToBottom() {
            messages.scrollTop = messages.scrollHeight;
        }

        function addMessage(text, sender) {
            const div = document.createElement("div");
            div.classList.add("message", sender);
            div.textContent = text;
            messages.appendChild(div);
            scrollToBottom();
        }

        async function sendMessage() {
            const text = input.value.trim();
            if (!text) return;

            addMessage(text, "user");
            input.value = "";
            addMessage("正在思考中...", "bot");

            try {
                const res = await fetch("/ask", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ user_input: text })
                });
                const data = await res.json();
                messages.lastChild.remove();
                addMessage(data.answer, "bot");
            } catch (err) {
                messages.lastChild.remove();
                addMessage("⚠️ 出错了，请稍后重试。", "bot");
            }
        }

        sendBtn.addEventListener("click", sendMessage);
        input.addEventListener("keydown", e => {
            if (e.key === "Enter") sendMessage();
        });
    </script>
</body>
</html>
